<template>
	<view class="content" style="overflow-x: hidden;">
		<view class="title">{{$t('General.forget.msg1')}}</view>
		<view class="send">{{$t('General.forget.msg2')}}+86:{{userInfo.areaCode?userInfo.areaCode:''}}{{userInfo.account}}</view>
		<!-- <input class="input" placeholder="请输入验证码" type="text" v-model="code"> -->
		<view class="code">
			<xt-verify-code ref="verifyInput" cursorColor="#000" class="verify-code" v-model="code"
				@confirm="vcodeInput">
			</xt-verify-code>
		</view>
		<template v-if="sendType == 0">
			<view v-if="!isAgain" class="countdown">{{time}}s{{' '}}{{ $t('General.forget.msg3')}}</view>
			<view v-if="isAgain" @click="onResend" class="countdown" style="color: #FF0025;">{{$t('General.forget.msg5')}}</view>
			<view class="">
				<uni-easyinput type="password" class="input" :styles="{'color':pwdColor}" :inputBorder="false" suffixIcon="eye" v-model="password" @input="verifyInput('pwd')"
					:placeholder="$t('General.login.enterPassword')"></uni-easyinput>
				<uni-easyinput type="password" class="input" :styles="{'color':confPwdColor}" :inputBorder="false" suffixIcon="eye" v-model="secondPwd" @input="verifyInput('confPwd')"
					:placeholder="$t('General.login.pswConfirm')"></uni-easyinput>
			</view>
			<view class="info" style="display: flex;align-items: center;">
				<img class="info-img" src="https://statics.xmcsrv.net/weixin/jInfo.png" alt="">
				<text @click="onInfo">{{$t('General.login.pwdRule')}}</text>
			</view>
			<view v-if="isInfo" class="tips">{{$t('General.login.ruleTips')}}</view>
			<view class="foot-button">
				<!-- <view class="next" :class="{'next-active':active}" @click="nextAction">下一步</view> -->
				<view data-code="600011" data-eventName="click_forget_password_phone_finish" class="next radius-btn" :class="{'next-active':active}" @click="active?nextAction():''">{{$t('General.login.finish')}}</view>
			</view>
		</template>
		<template v-if="sendType == 1">
			<view class="foot-button1">
				<!-- <view class="next next-active"  @click="nextAction()">{{time}}s后重新发送</view> -->
				<view class="next radius-btn" :class="{'next-active':time==0}" @click="time==0?nextAction():''">{{time>0?(time+'s'):''}} {{$t('General.forget.msg3')}}</view>
			</view>
		</template>
		<template v-if="sendType == 2">
			<view class="foot-button1">
				<!-- <button type="default" class="next" hover-class="hover" :class="{'next-active':code.length==6}" @click="code.length==6?nextAction():''">确定</button> -->
				<view class="next radius-btn" :class="{'next-active':time==0}" @click="time==0?nextAction():''">{{$t('General.forget.msg5')}}&nbsp;{{time>0?(time+'s'):''}}</view>
			</view>
		</template>
		<j-modal :value="codePopup"  :title="$t('General.family.tip')" @ok="closeCodePopup" @cancel="closeCodePopup" >
			<view slot="content" class="popupCont">
				{{ $t('General.forget.msg7') }}{{isMobile ? $t('General.forget.phone') : $t('General.forget.mail')}}{{$t('General.forget.msg8')}}
			</view>
		</j-modal>
	</view>
</template>

<script>
	let that = null
	const { debounce } = require('@/utils/util.js');
	import { CodeMsg } from '@/utils/errorCode.js'
	const {passwordPattern} = require('@/utils/util.js');
	export default {
		data() {
			return {
				areaCode: '',
				account: '',
				isMobile: 1,
				code: '',
				time: 120,
				timerId: null,
				userInfo: {},
				isAgain: false,
				password: '',
				secondPwd: '',
				isInfo: false,
				sendType:0,  //1 是从注册跳转过来的   0是忘记密码  2是从删除账户跳转过来的
				codePopup:false,
				pwdColor:'red',
				confPwdColor:'red'
			}
		},
		computed: {
			active() {
				// if (this.code.length > 5 && passwordPattern(this.password)&& (this.password == this.secondPwd)) {
				if (this.code.length > 5 && passwordPattern(this.password)&& passwordPattern(this.secondPwd)) {
					return true
				} else return false
			}
		},
		onLoad(opt) {
			that = this
			this.userInfo = JSON.parse(opt.data)
			this.isMobile = this.userInfo.isMobile;
			this.sendType = opt.sendType || 0
			this.countDown()
			console.log('传值=====',this.userInfo);
			// if(this.sendType == 2){
			// 	this.deleteUser('code')
			// }
		},
        onShow() {
            uni.setNavigationBarTitle({
                title: this.$t('General.forget.msg4')
            })
        },
		onUnload() {
			clearInterval(this.timerId)
			this.timerId = null
		},
		methods: {
			//关闭弹框
			closeCodePopup(){
				this.codePopup = false
				uni.navigateBack({
					
				})
			},
			vcodeInput(e) {
				console.log('验证码',e);
				if(this.sendType == 1){
					this.register()
				}
				if(this.sendType == 2){
					this.deleteUser('del')
				}
			},
			//输入密码
			verifyInput(type) {
				this.verification(type);
			},
			//校验
			verification(type) {
				if(type == 'pwd'){
					if (passwordPattern(this.password)) {
						this.pwdColor = '#000';
					} else {
						this.pwdColor = 'red';
					}
				}else if(type == 'confPwd'){
					if (passwordPattern(this.secondPwd)) {
						this.confPwdColor = '#000';
					} else {
						this.confPwdColor = 'red';
					}
				}
			},
			onInfo() {
				this.isInfo = !this.isInfo
			},
			// 重新发送
			onResend() {
				this.sendPhoneCode('fp')
			},
			// 倒计时
			countDown() {
				let page = getCurrentPages()
				this.timerId = setInterval(() => {
					this.time--
					if (this.time < 0) {
						this.time = 0;
						this.isAgain = true;
						clearInterval(this.timerId)
						if (!this.code) {
							console.log('倒计时==',this.time);
							if(page[page.length - 1].$page.fullPath.includes('sendCode')){
								this.showTips()
							}
						}
					}
				}, 1000)
			},
			nextAction:debounce(()=>{
				that.nextAction2()
			}),
			//下一步
			nextAction2() {
				if(this.sendType == 1){
					this.sendPhoneCode('re')
					return
				}
				if(this.sendType == 2){
					this.deleteUser('code')
					return
				}
				const regex = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[@$!%*?&#(){}?/.<>,;:-])[a-zA-Z\d@$!%*?&#().{}?/<>,;:-]{8,64}$/;
				if (!this.password || !this.secondPwd) {
					uni.showToast({
						title: this.$t('General.login.pswPla'),
						icon: 'none'
					})
					return
				}
				if (!regex.test(this.password) || !regex.test(this.secondPwd)) {
					uni.showToast({
						title: this.$t('General.login.ruleTips2'),
						icon: 'none'
					})
					return
				}
				if (this.password !== this.secondPwd) {
					uni.showToast({
						title: this.$t('General.login.phonePla3'),
						icon: 'none'
					})
					return
				}
				let data = {
					userId: this.userInfo.userId,
					uname: this.userInfo.uname,
					verCode: this.code
				}
				if (this.isMobile) {
					data.phone = this.userInfo.account
				} else {
					data.mail = this.userInfo.account
				}
				uni.showLoading({
					mask: true
				})
				getApp().globalData.api.judgeVerifyCode(data, (result) => {
					uni.hideLoading();
					this.userInfo.code = this.code;
					this.savePassword();
					// uni.navigateTo({
					// 	url: '/jvss/pagesMine/forget-password/newPassword?data=' + JSON.stringify(this
					// 		.userInfo)
					// })
				});
			},
			register(){
				this.$postPointData({code:'600002'})
				uni.showLoading({
					title:this.$t('General.login.registering')
				})
				let data = {
					password:this.userInfo.password,
					confirmPass:this.userInfo.password,
					phone:this.userInfo.phone,
					verCode:this.code,
				}
				getApp().globalData.api.mobileRegister(data, (result) => {
					this.$postPointData({code:'600008'})
					uni.showToast({
						title:this.$t('General.login.registering2'),
						icon:"none"
					})
					uni.$emit('registerSuccess',data)
					setTimeout(()=>{
						uni.navigateBack({delta:2})
					},1000)
				})
			},
			//重置
			savePassword() {

				let data = {
					id: this.userInfo.userId,
					verCode: this.userInfo.code,
					newPass: this.password,
					confirmPass: this.secondPwd
				}
				uni.showLoading({
					title: this.$t('General.login.resetting'),
					mask: true
				})
				if (this.isMobile) {
					data.phone = this.userInfo.account
					this.phoneResetPassword(data)
				} else {
					data.mail = this.userInfo.account
					this.mailResetPassword(data)
				}
			},
			//手机找回密码
			phoneResetPassword(data) {
				getApp().globalData.api.phoneResetPassword(data, (result) => {
					uni.hideLoading();
					uni.showToast({
						title: this.$t('General.forget.msg6'),
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 2
						})
					}, 1000)
				});
			},
			//邮箱找回密码
			mailResetPassword(data) {
				getApp().globalData.api.mailResetPassword(data, (result) => {
					uni.hideLoading();
					uni.navigateBack({
						delta: 2
					})
				});
			},
			//发送手机验证码
			sendPhoneCode(type) {
				uni.showLoading({
					mask: true
				})
				let data = {phone:this.userInfo.account,type:type,codeSize: 6}
				if(type == 'ucan'){
					data.phone = this.userInfo.uname
				}
				getApp().globalData.api.sendMobileVerifyCode(data, (result) => {
					uni.hideLoading();
					this.isAgain = false
					this.time = 120;
					this.countDown();
					if(this.sendType == 1){
						uni.showToast({
							title:'发送成功',
							icon:'none'
						})
						this.time = 120
						this.countDown()
					}
				});
			},
			//弹框
			showTips() {
				let cnt = this.isMobile ? '手机号' : '邮箱'
				if(this.sendType != 2){
					this.codePopup = true
				}
				// uni.showModal({
				// 	title: '如果还没收到验证码消息，请尝试重新发送！',
				// 	content: `请检查${cnt}是否正确`,
				// 	success: function(res) {
				// 		if (res.confirm) {
				// 			console.log('用户点击确定');
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消');
				// 		}
				// 	}
				// })
			},
			//删除账户(以及删除账户时删除验证码)
			deleteUser(type){
				let userInfo = uni.getStorageSync('userInfo')
				let data = {
						codeSize:6,
						uname:this.userInfo.uname,
						upass:this.userInfo.upass,
					};
				if(type == 'del'){
					data.code = this.code
				}
				getApp().globalData.api.userecancel(data, (res) => {
					console.log('删除账户===',res,type);
					if(type == 'code'){
						if(res.code == 4302){  //发送注销验证码成功
							uni.showToast({
								title:'发送成功',
								icon:'none'
							})
							this.time = 120
							this.countDown()
						}else{
							uni.showToast({
								title:CodeMsg[res.code] || res.msg,
								icon:'none'
							})
						}
					}else if(type == 'del'){
						if(res.code == 2000){
							uni.removeStorageSync('accessToken');
							uni.removeStorageSync('userInfo');
							uni.removeStorageSync('checkAutoLogin');
							uni.removeStorageSync("VMSPUBLICKKEY");
							uni.removeStorageSync("VMSATOKEN");
							uni.removeStorageSync("VMSKEY");
							uni.removeStorageSync('devListVal')
							uni.removeStorageSync('currentGroupId')
							uni.removeStorageSync('groupList')
							uni.removeStorageSync('openId')
							uni.removeStorageSync('uname')
							uni.removeStorageSync('upass')
							if(getApp().globalData.mqtt.client){
								getApp().globalData.mqtt.close()
							}
							uni.showToast({
								title:'删除账户成功',
								icon:'none',
								duration:1500,
								success: () => {
									setTimeout(()=>{
										// uni.reLaunch({
										// 	url: '/jvss/pages/login/login'
										// })
										uni.reLaunch({
											url: '/jvss/pages/login/login'
										})
									},1500)
								}
							})
						}else{
							uni.showToast({
								title:CodeMsg[res.code] || res.msg,
								icon:'none'
							})
						}
					}
				},true)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.verify-code {
		.xt__verify-code {
			width: 80% !important;
			margin: auto;

		}

		.xt__input-ground {
			margin: auto;

			.xt__code-text {
				font-size: 40rpx !important;

			}
		}

		/deep/.xt__code-text {
			font-size: 40rpx !important;

		}

		/deep/.xt__box {
			width: 76rpx !important;
			height: 76rpx !important;
			background: #E5E6E6;
			border-radius: 18rpx;
			border: none;
			border-width: 0 !important;
			border-style: none !important;
		}
	}

	.code {
		margin-top: 50rpx;
	}

	/deep/.uni-easyinput {
		width: 100%;
		border-radius: 15rpx;
		margin-top: 20rpx;
		overflow: hidden;

		.uni-easyinput__content-input {
			height: 80rpx;
		}
	}

	.info {
		color: #FF0025;
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	.info-img {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.tips {
		color: red;
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.content {
		padding: 40rpx;

		.title {
			font-size: 30rpx;
			font-weight: 700;
		}

		.send {
			margin-top: 40rpx;
			color: #999;
			font-size: 26rpx;
		}

		.input {
			margin-top: 40rpx;
			background: white;
			border-radius: 10rpx;
			padding: 20rpx;
		}

		.countdown {
			margin: 40rpx 0 40rpx 0;
			font-size: 24rpx;
			color: #999;
		}
		.hover{
			background: #E5E6E6 !important;
		}

		.next {
			height: 80rpx;
			background: #999;
			color: white;
			//border-radius: 10rpx;
			justify-content: center;
			display: flex;
			align-items: center;
		}

		.next-active {
			background: white;
			border: 1rpx solid #999;
			color: #FF0025;
		}
	}

	.foot-button {
		width: calc(100% - 80rpx);
	}
	.foot-button1{
		width: calc(100% - 80rpx);
		margin: auto;
		margin-top: 80rpx;
		
	}
</style>